<template>
  <div>
    <button class="deng" @click="showPopup">一键登录</button>


    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <p>温馨提示</p>
          <p class="indented">
            个人信息和隐私,您可以通过《妙手医生
            隐私政策》了解我们收集、使用、存储用户
            个人信息的情况,以及您所享有的相关权利.请您仔细阅读并充分理解相关内容:
            <br>
            1.为向您提供预约挂号、在线问诊以及商品
            购买等服务，我们将依据《妙手医生隐私政
            策》收集、使用、存储必要的信息。<br>
            2.基于您的明示授权，我们可能会申请开启
            您的存储、定位、麦克风、摄像头或相机设
            备权限，您有权拒绝或取消授权。<br>
            3.您可以访问、更正、删除您的个人信息
            还可以撤回授权同意、注销账号、投诉举报
            以及调整基他隐私设置，<br>
            4.我们已采取符合业界标准的安全防护措施
            保护您的个人信息。<br>
            5.如您是未成年人，请您和您的监护人仔细
            阅读本隐私政策，并在征得您的监护人授权
            同意的前提下使用我们的服务或向我们提供
            个人信息。
            请您阅读完整版
          </p>
          <div class="btn">
            <div>
              <button @click="cloes">不同意</button>
            </div>
            <div>
              <button class="btn_buton" @click="dian">同意并继续使用</button>
            </div>
          </div>

        </div>
      </div>
    </van-overlay>

  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {useRouter} from "vue-router";
const router = useRouter()
const show = ref(false);
const cloes = () => {
  show.value = false
}

const dian = () => {
  router.push('/login')
}

const showPopup = () => {
  show.value = true;
}

</script>

<style lang="scss" scoped>
.indented {
  text-indent: 2em;
  /* 2个字符的缩进 */
  line-height: 1.6;
  /* 行高 */
  margin-bottom: 10px;
  /* 行与行之间的间�� */
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  background-color: #fff;

  p {
    text-align: center;
    font-weight: 500px;

  }

  button {
    width: 145px;
    height: 30px;
    border: solid 1px #000;
    border-radius: 20px;
    border: none;
    margin-left: 25px;
  }
}

.btn {
  display: flex;
}

.btn_buton {
  background: skyblue;
}

.deng {

  width: 200px;
  height: 40px;
  background: skyblue;
  border-radius: 20px;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;

}
</style>
